<template>
  <view class="content">
    <view class="content-top">
      <view class="content-top-left">
        <view>评论</view>
        <view class="commentNum">{{ commentNum }}</view>
      </view>
      <view class="content-top-right">
        <view @tap="getcommentList((type = 1))">按推荐</view>
        <view @tap="getcommentList((type = 2))">按时间</view>
      </view>
    </view>
    <!-- 评论区 -->
    <scroll-view scroll-y="true" style="height: 750rpx; margin-top: 30rpx">
      <view class="comment-main">
        <view
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <view class="commentFirst">
            <view class="creatInfo">
              <view class="creatInfo-left">
                <image class="header" :src="item.image"></image>
                <view>
                  <view>{{ item.createByName }}</view>
                  <view class="time">
                    {{ item.createTime }}
                  </view></view
                >
              </view>
              <view class="creatInfo-right">
                <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                <view>{{ item.like }}</view>
              </view>
            </view>
            <view class="details">{{ item.details }}</view>
          </view>
          <view v-if="item.child.length > 0" class="commentChild"
            ><view
              v-for="(v, i) in item.child"
              :key="i"
              class="commentChild-item"
            >
              <view>
                <view class="creatInfo">
                  <view class="creatInfo-left">
                    <image class="header" :src="v.image"></image>
                    <view>
                      <view>{{ v.createByName }}</view>
                      <view class="time">
                        {{ v.createTime }}
                      </view></view
                    >
                  </view>
                  <view class="creatInfo-right">
                    <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                    <view>{{ v.like }}</view>
                  </view>
                </view>
                <view class="details">{{ v.details }}</view>
              </view>
            </view></view
          >
        </view>
      </view></scroll-view
    >
    <view class="subComment">
      <u-input v-model="commentValue" type="text" />
      <view class="sub-btns">
        <view class="sub-btn">
          <u-icon name="chat" color="#aaa" size="40"></u-icon>
          <view>{{ allComment }}</view>
        </view>
        <view class="sub-btn">
          <u-icon name="star" color="#aaa" size="40"></u-icon>
          <view>{{ allLike }}</view>
        </view>
        <view class="sub-btn">
          <u-icon name="thumb-up" color="#aaa" size="40"></u-icon>
          <view>{{ allGood }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      allComment: 13,
      allLike: 20,
      allGood: 20,
      commentNum: 42,
      type: 1,
      commentValue: "",
      commentList: [
        {
          createByName: "小貂蝉",
          createTime: "2022-12-20 11:00:00",
          details: "测试",
          like: 3,
          image: require("@/static/img/header.jpg"),
          child: [
            {
              createByName: "子龙",
              createTime: "2022-12-20 11:00:00",
              details: "测试",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
            {
              createByName: "刘备",
              createTime: "2022-12-20 11:00:00",
              details: "测试",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
            {
              createByName: "飞飞",
              createTime: "2022-12-20 11:00:00",
              details: "测试",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
          ],
        },
        {
          createByName: "李元芳",
          createTime: "2022-12-20 11:00:00",
          details: "测试",
          like: 3,
          image: require("@/static/img/header.jpg"),
        },
      ],
    };
  },
  methods: {
    getcommentList(type) {
      if (type == 1) {
        console.log("按推荐");
      } else if (type == 2) {
        console.log("按时间");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0 30rpx;
  .content-top {
    display: flex;
    justify-content: space-between;
    .content-top-left {
      display: flex;
      .commentNum {
        margin-left: 20rpx;
      }
    }
    .content-top-right {
      display: flex;
      > view {
        margin: 0 10rpx;
      }
    }
  }
  .comment-main {
    .comment-item {
      margin-top: 40rpx;
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid #ccc;
      .commentFirst {
        .creatInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .creatInfo-left {
            display: flex;
            align-items: center;
            .header {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              margin-right: 20rpx;
            }
            .time {
              color: #aaa;
              margin-top: 10rpx;
            }
          }
          .creatInfo-right {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #aaa;
          }
        }
        .details {
          margin-top: 30rpx;
        }
      }
      .commentChild {
        padding: 0 0 0 40rpx;
        background-color: #eee;
        padding: 20rpx;
        margin-top: 30rpx;
        .commentChild-item {
          margin-top: 20rpx;
          .creatInfo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .creatInfo-left {
              display: flex;
              align-items: center;
              .header {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-right: 20rpx;
              }
              .time {
                color: #aaa;
                margin-top: 10rpx;
              }
            }
            .creatInfo-right {
              display: flex;
              align-items: center;
              font-size: 30rpx;
              color: #aaa;
            }
          }
          .details {
            margin-top: 30rpx;
          }
        }
      }
    }
  }
}
.subComment {
  display: flex;
  align-items: center;
  .sub-btns {
    display: flex;
    .sub-btn {
      margin-left: 20rpx;
      display: flex;
    }
  }
}
</style>